<template>
    <footer class="footer-box">
        <div class="comment-input" @click=" showInput=true ">不想说点什么吗？</div>
        <div class="comment-detail" v-show="showInput" @click=" showInput=false ">
            <div class="user-input" @click.stop>
                <h4>头像</h4>
                <ul class="user-head" @click.capture="userChoose($event.target)">
                    <li v-for="(c, index) in 24" :key="index"
                        :class=" `user${c}.png`==user.userImg?'user-choose':'' " 
                        :userimg.prop="`user${c}.png`"
                        :style=" `background-image: url(./imgs/users/user${c}.png)` "
                    ></li>
                </ul>
                <h4>昵称</h4>
                <input class="user-nikename" type="text" placeholder="昵称" v-model="user.name">
                <h4>评分</h4>
                <div class="film-source reset-star">
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img close"></span>
                    <span class="star-img close"></span>
                    <span class="star-source">7.9</span>
                </div>
                <h4>评论</h4>
                <textarea class="user-message" placeholder="留下点足迹..." v-model="user.msg"></textarea>
                <div class="send-btn">
                    <span @click="showInput=false">关闭</span>
                    <!-- <span @click=" $emit('set-commone',user) ">发送</span> -->
                    <span @click=" sendCommon() ">发送</span>
                </div>
            </div>
        </div>
    </footer>
</template>
<script>
    Vue.component("BottomBar",{
        template:document.currentScript.ownerDocument.querySelector("template"),
        data(){
            return {
                showInput:false,
                user:{
                    userImg:"user1.png",
                    name:"",
                    msg:"",
                    source:"5",
                    time:null
                }

            }
        },
        methods: {
            userChoose(target){
                console.log(target)
                if(target.tagName=="LI"){
                    this.user.userImg = target.userimg;
                }
            },
            sendCommon(){
                this.user.time = new Date().toLocaleString();
                this.$emit('set-commone', { ...this.user } );
                this.showInput = false;
            }
        },
    })


</script>